<template>
  <div class="addOutpatient">
    <div class="title">
      集团基本信息
    </div>
    <div class="content">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        size="small"
        label-width="65px"
      >
        <el-form-item label="集团名称" prop="groupName">
          <el-input v-model="ruleForm.groupName" placeholder="请输入诊所名称"></el-input>
        </el-form-item>
        <el-form-item label="诊所类型" prop="groupType">
          <el-select
            v-model="ruleForm.groupType"
            placeholder="请选择"
            class="inputLab"
          >
            <el-option v-for="item in dict.clinic_type" :key="item.id" :label="item.label" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="mobile">
          <el-input
            v-model="ruleForm.mobile"
            class="inputLab"
            placeholder="请输入联系电话"
          ></el-input>
        </el-form-item>
        <div class="areaFlex">
          <el-form-item label="所在省市" prop="proCode">
            <el-select
              v-model="ruleForm.proCode"
              placeholder="省份"
              class="selectLab"
              @change="provinceChange"
            >
              <el-option
                v-for="item in province"
                :key="item.areaId"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="cityCode">
            <el-select
              v-model="ruleForm.cityCode"
              placeholder="城市"
              class="selectLab marginLab"
              @change="cityChange"
            >
              <el-option
                v-for="item in city"
                :key="item.areaId"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="areaCode">
            <el-select
              v-model="ruleForm.areaCode"
              placeholder="选择区"
              class="selectLab marginLab"
            >
              <el-option
                v-for="item in area"
                :key="item.areaId"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="详细地址" prop="address">
          <el-input
            v-model="ruleForm.address"
            class="inputLab"
            placeholder="请输入详细地址"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { saleArea } from '@/api/order';
import { operAdd, operSearchId, operEdit } from '@/api/oper';
export default {
  name: '',
  props: ['id'],
  data() {
    return {
      ruleForm: {
        groupName: '',
        groupType: '',
        mobile: '',
        proCode: '',
        cityCode: '',
        areaCode: '',
        address: '',
        contacts: '',
        officeTel: '',
        salesId: '',
        logoUrl: '',
        createUser: ''
      },
      rules: {
        groupName: [
          { required: true, message: '请输入诊所名称', trigger: 'blur' }
        ],
        groupType: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        mobile: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        proCode: [
          { required: true, message: '选择省', trigger: 'change' }
        ],
        cityCode: [
          { required: true, message: '选择市', trigger: 'change' }
        ],
        areaCode: [
          { required: true, message: '选择区', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ]
      },
      doctorProfessional: [],
      doctorProfessional1: [],
      province: [],
      city: [],
      area: []
    };
  },
  dicts: [
    'clinic_type' // 诊所性质
  ],
  computed: {
    user() {
      return this.$store.getters.user;
    }
  },
  watch: {
  },
  mounted() {
    this.$nextTick(() => {
      if (this.id) {
        this.initData(() => {
          operSearchId(this.id).then((res) => {
            this.provinceChange(res.proCode, () => {
              this.cityChange(res.cityCode, () => {
                for (var key in res) {
                  for (var k in this.ruleForm) {
                    if (key === k) {
                      this.ruleForm[k] = res[key];
                    }
                  }
                }
                this.ruleForm.groupType = Number(this.ruleForm.groupType);
              });
            });
          });
        });
      } else {
        this.initData();
      }
    });
  },
  methods: {
    initData(callback) {
      saleArea({ parentAreaId: '-1', sonlevel: '1' })
        .then((res) => {
          this.province = res;
          callback && callback(this.province);
        }).catch((er) => {});
    },
    addOutpatient(callback) {
      this.ruleForm.createUser = this.user.id;
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          operAdd(this.ruleForm).then((e) => {
            callback();
          });
        } else {
          console.log('err');
        }
      });
    },
    editOutpatient(callback) {
      this.ruleForm.createUser = this.user.id;
      this.ruleForm.id = this.id;
      // this.ruleForm.groupType = this.ruleForm.groupType.toString();
      operEdit(this.ruleForm).then((e) => {
        callback();
      });
    },
    // 省切换
    provinceChange(code, callback) {
      let parentAreaId = 0;
      this.ruleForm.cityCode = '';
      this.ruleForm.areaCode = '';
      this.province.forEach((item) => {
        if (item.code === code) {
          parentAreaId = item.areaId;
          saleArea({ parentAreaId, sonlevel: '2' })
            .then((res) => {
              this.city = res;
              callback && callback(this.city);
            })
            .catch((er) => {
              this.city = [];
            });
        }
      });
    },
    cityChange(code, callback) {
      let parentAreaId = 0;
      this.city.forEach((item) => {
        if (item.code === code) {
          parentAreaId = item.areaId;
          saleArea({ parentAreaId, sonlevel: '3' })
            .then((res) => {
              this.area = res;
              callback && callback();
            })
            .catch((er) => {
              this.area = [];
            });
        }
      });
    }
  }
};
</script>

<style  lang="scss">
    .addOutpatient{
        .title{
          color: #333333;
          font-size: 16px;
          margin-bottom: 20px;
          border-left: 3px solid #508FCC;
          padding-left: 10px;
            // background: #ccc;
            // height: 80px;
            // line-height: 80px;
        }
        .el-form-item{
          display: flex;
        }
        .el-form-item__label{
          width: 78px !important;
          margin-right: 20px;
        }
        .el-form-item__content{
          margin-left: 0 !important;
          .el-input__inner{
              width: 240px;
              height: 42px;
          }
          .el-select{
            width: 100%;
          }
        }
        .areaFlex{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: 20px;
            .inputTitle{
                width:60px;
                line-height: 32px;
            }
            .inputLab{
                width: 183px;
                // flex: 1;
            }
            .selectLab{
                width: 120px;
            }
            .marginLab{
                margin-left: 10px;
            }
            .el-form-item {
              margin-right: 15px;
            }
            .el-form-item__content{
              margin-left: 0 !important;
              .el-input__inner{
                width: 132px;
              }
            }
            .is-error{
              &:nth-child(2),&:nth-child(3){
                .el-form-item__error{
                   left: 10px;
                }
              }
            }
        }
    }
</style>
